<template>
  <div class="sc-select" v-if="options != null">
    <div v-if="loading" class="sc-select-loading">
      <el-icon class="is-loading">
        <el-icon-loading />
      </el-icon>
    </div>
    <el-select
      v-model="value"
      @change="valueChange"
      :loading="loading"
      ref="select"
      @visible-change="visibleChange"
      :disabled="disabled"
      :placeholder="placeholder"
      @keyup.delete="clearValue"
      class="no-arrow"
    >
      <el-option
        v-for="item in options"
        :value="item[props.value] ?? item['id']"
        :label="item[props.label]"
        :key="item[props.label]"
      >
        <slot name="option" :data="item"></slot>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import config from "@/config/select";

export default {
  props: {
    valueEqKey: { type: Boolean, default: false },
    apiObj: { type: Object, default: () => {} },
    dic: { type: String, default: "" },
    dicparams: { type: Object, default: () => ({}) },
    modelValue: null,
    params: null,
    placeholder: null,
    filterparams: null,
    autoconfigparams: { type: Object, default: () => null },
    editsource: { type: String, default: () => "dic" },
    disabled: { type: Boolean, default: false },
    data: { type: Array, default: () => null },
  },
  emits: ["valueChange", "update:modelValue", "select"],
  data() {
    return {
      loading: false,
      options: null,
      props: config.props,
      value: this.modelValue == null ? null : (this.modelValue ?? "") + "",
      change: {},
    };
  },
  async mounted() {
    //如果有默认值就去请求接口获取options
    if (this.data != null) {
      this.initOptions(this.data);
    } else {
      await this.getRemoteData();
    }
    // this.valueChange();
  },

  watch: {
    modelValue() {
      this.value = this.modelValue == null ? null : (this.modelValue ?? "") + "";
    },
    data() {
      this.initOptions(this.data);
      this.valueChange();
    },
  },
  methods: {
    valueChange() {
      let selectData = null;
      this.options.forEach(element => {
        if ((this.value == null || this.value == "") && element.selected == true) {
          this.value = element.key;
        }

        if (this.value == element.key) {
          selectData = element;
          this.change = {
            label: element[this.props.label],
            key: this.value,
          };
        }
      });
      this.$emit("select", selectData);
      this.$emit("valueChange", this.change);
      this.$emit("update:modelValue", this.value);
    },
    clearValue() {
      this.value = null;
      this.$emit("select", this.value);
      this.$emit("valueChange", this.value);
      this.$emit("update:modelValue", this.value);
    },
    //选项显示隐藏事件
    visibleChange(ispoen) {
      if (ispoen && this.options.length == 0 && (this.dic || this.apiObj)) {
        this.getRemoteData();
      }
    },
    initOptions(data) {
      this.options = data?.map(v => {
        v.key = (v.key ?? v.id) + "";
        return v;
      });
    },
    //获取数据
    async getRemoteData() {
      this.loading = true;
      var res = {};
      let param = this.editsource != "dic" ? this.filterparams : this.dicparams;

      if (this.autoconfigparams != null) {
        param = Object.assign({}, param, {
          filter:
            this.autoconfigparams instanceof Array
              ? this.autoconfigparams
              : [this.autoconfigparams],
        });
      }
      if (this.params != null) {
        param = Object.assign({}, param, {
          filter: this.params instanceof Array ? this.params : [this.params],
        });
      }
      res = await this.apiObj.get(param);

      var response = config.parseData(res);
      this.initOptions(response.data.rows ?? response.data);

      this.loading = false;
    },
  },
};
</script>

<style>
.sc-select {
  display: inline-block;
  position: relative;
}
.vxe-grid .sc-select .el-select--small .el-select__wrapper {
  padding: 2px 2px;
}
.sc-select-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 100;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.sc-select-loading i {
  font-size: 14px;
}

.dark .sc-select-loading {
  background: var(--el-bg-color-overlay);
  border-color: var(--el-border-color-light);
}
</style>
